<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Juego</title>
        <script type="text/javascript">
        var wsocket;    // Websocket connection
        var numEsc;   // User's name
        var panel;   // Chat area
        var posX;
        var posY;
        /* Connect to the Websocket endpoint
        * Set a callback for incoming messages */
        function connect() {
            numEsc=0;
            panel = document.getElementById("panelDeImagen");
            wsocket = new WebSocket("ws://localhost:8080/PruebaAjaxWS2/websocketjuego");
            wsocket.onmessage = onMessage;
            wsocket.onerror = onError;
        }
        /* Callback function for incoming messages
        * evt.data contains the message
        * Update the chat area, user's area and Websocket console */
        function onMessage(evt) {
          
            /* Parse the message into a JavaScript object */
            var msg = JSON.parse(evt.data);
            numEsc=msg.escenario;
            var imagen="data:image/png;base64,"+numEsc;
            panel.setAttribute("src", imagen);
        }
        
        function onError(evt) {
            Alert("oho!.. error:" + evt.data);
        };
        
        /* Send a join message to the server */
        function send() {
            var jsonstr;
            /* Create a message as a JavaScript object */
            var msg = {};
            msg.escenario = numEsc;
            msg.posx = posX;
            msg.posy = posY;
            /* Convert the message to JSON */
            jsonstr = JSON.stringify(msg);
            /* Send the JSON text */
            wsocket.send(jsonstr);
        }
        
        function coords(event)
        {
            var rect= panel.getBoundingClientRect();
            var x=(event.clientX - rect.left);
            var y=(event.clientY - rect.top);
            
            var ancho=panel.clientWidth;
            var alto= panel.clientHeight;
            posX=Math.floor((x*1000)/ancho);
            posY=Math.floor((y*1000)/alto);
            send();
        }

        /* Call connect() when the page first loads */
        window.addEventListener("load", connect, false);
        </script>
    </h:head>
    <h:body>
        <img id="panelDeImagen" onmousedown="coords(event);" border="0" src="resources/0.png" width="50%" />
    </h:body>
</html>

